import React,{lazy} from "react"
import { Button, Space, Swiper, Toast } from "antd-mobile";

import {useNavigate} from "react-router-dom"

import "./index.less"
// 导入底部tabBer栏
import TabBers from "../tabBer/index"
const colors = [
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
    "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg"
  ];
  const  swiper = [
    {
        imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210924%2F64502883d3314987a5249558d0cfef97.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg',
        area:"1室1厅1卫-48",
        address:"东城区安外大街3号院",
        prise:"4800"
    },
    {
        imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp272832657.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg',
        area:"1室1厅1卫-48",
        address:"东城区安外大街3号院",
        prise:"4500"
    },
]


function LocationUrl(){
    const navgiate = useNavigate();
    
    return(
        <span className="spans" onClick={()=>navgiate('house')}></span>
    )
  }

// 首页
export default class Home extends React.Component{

    
render(){
    return(
        <div>
        <div className="changeIndex">
            <ul className="input">
            <li>
            <i className="iconfont icon-xiazai19">
                <LocationUrl ></LocationUrl>
            </i>
            </li>
            <li>
                <div className="formIndex">
                <i className="iconfont icon-seach" />
                <span className="text">请输入小区或地址</span>
                </div>
            </li>
            <li>
            <i className="iconfont icon-xiaoxi"></i>
            </li>
            </ul>
        </div>
        <div>
        <Swiper autoplay loop> 
          {colors.map((item,index) => (
            <Swiper.Item key={index}>
              <img className="content" src={item} alt="" />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
        <div>
        <ul className="ulList">
                    <li>找室友</li>
                    <li>宜居社区</li>
                </ul>
                <div className="texts">
                    热门房源
                </div>
                <div className="swipers">
                    <ul className="swiperList">
                       {
                         swiper.map((item,index)=>{
                             return(
                                <li className="liList" key={index}>
                                <img src={item.imgUrl} alt="" />
                                <div className="details">
                                    <div className="left">
                                        <p>{item.address}</p>
                                        <p>{item.area}</p>
                                    </div>
                                    <div className="right">
                                        <div className="buttom">整租</div>
                                        <p><span>{item.prise}</span>/月</p>
                                    </div>
                                </div>
                            </li>
                             )
                         })  
                       }
                    </ul>
                </div>
        </div>
        </div>
    )
}

}